<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰作业1</title>
    <script src="node_modules\vue\dist\vue.js"></script>

</head>
<body>
    <div id="main">
        <p>单价：{{ price }}</p>
        <p>数量：{{ number }}</p>
        <p>金额：{{ amount }}</p>
        <div>
          <button @click="number == 0 ? 0 : number--">－</button>
          <button @click="number++">＋</button>
        </div>
      </div>
      
<script>
    var vm=new Vue({ 
         el:'#main',
         data: {
             price: 30,
             number: 0
             },
         computed: {
             // 计算金额
             amount(){ return this.price * this.number }
            }
         })
  </script>
  
</body>
</html>